<template>
  <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">账户充值</p>
  <div class="main">
    <!-- ############################################## 表单 ############################################## -->
    <div class="content">
      <el-form :model="formData" label-width="6.25rem" label-position="left" :rules="rules" ref="refVal">
        <el-form-item label="充值账户：" style="width: 300px">
          <el-text>资金账户</el-text>
          <!-- <el-select v-model="formData.account" placeholder="充值账户" disabled>
            <el-option label="资金账户" value="1" />
            <el-option label="未结算" value="0" />
          </el-select> -->
        </el-form-item>
        <el-form-item label="账户余额：" style="width: 300px">
          <p>
            <span style="color: red">{{ balance }}</span
            >&nbsp;元
          </p>
        </el-form-item>
        <el-form-item label="充值金额：" style="width: 300px" prop="amount">
          <el-input v-model="formData.amount" placeholder="充值金额" />
        </el-form-item>
        <el-form-item label="支付方式：" style="width: 300px" prop="payType">
          <el-radio-group v-model="formData.payType" @change="selectBrand">
            <el-radio-button label="B2B">企业网银</el-radio-button>
            <el-radio-button label="BANK_TRANSFER">银行汇款</el-radio-button>
          </el-radio-group>
          <el-select
            v-if="formData.payType == 'B2B'"
            class="mt10"
            v-model="formData.bankCode"
            :filterable="true"
            :filter-method="filterSelet"
            placeholder="请选择支付银行"
            style="width: 240px">
            <el-option v-for="item in selectData" :key="item.id" :label="item.name" :value="item.code" />
            <template #footer>
              <smartPager
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="total"
                @change="handleCurrentChange" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="submit(refVal)">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <el-dialog v-model="paySuccess" align-center width="40%">
    <template #header>
      <p style="color: #fff">下单成功</p>
    </template>
    <div class="digTop">
      <img src="/src/assets/images/success.png" alt="" />
      <p class="digTop_p">下单成功，等待汇款</p>
      <p class="digTop_t">
        请务必汇款时，在“用途/备注/摘要”中填写此码<span style="color: #116cf8">{{
          payFormData.rechargeInfo.remitComment
        }}</span>
      </p>
    </div>
    <div class="digMain">
      <div class="digMain_tips">
        <p>汇款注意事项：</p>
        <div class="digMain_tips_li">
          <img src="/src/assets/images/warn.png" alt="" />
          <p>
            &nbsp;汇款金额需为<span style="color: #116cf8">&nbsp;{{ payFormData.rechargeInfo.orderAmount }}&nbsp;</span
            >元
          </p>
        </div>
        <div class="digMain_tips_li">
          <img src="/src/assets/images/warn.png" alt="" />
          <p>
            &nbsp;汇款账户全程需为<span style="color: #116cf8"> {{ payFormData.bankInfo.accountName }} </span>
          </p>
        </div>
        <div class="digMain_tips_li">
          <img src="/src/assets/images/warn.png" alt="" />
          <p>&nbsp;易宝指定账户为<span style="color: #116cf8"> 易宝支付有限公司 </span></p>
        </div>
        <div class="digMain_tips_li">
          <img src="/src/assets/images/warn.png" alt="" />
          <p>
            &nbsp;请务必汇款时，在“用途/备注/摘要”中填写此码<span style="color: #116cf8">
              {{ payFormData.rechargeInfo.remitComment }}
            </span>
          </p>
        </div>
      </div>
      <div class="table_title">
        {{ payFormData.bankInfo.accountName }}
      </div>
      <table border="1" height="80" style="width: 80%" bordercolor="red" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <th style="width: 50%; color: #333">付款方信息</th>
          <th style="width: 50%; color: #333">收款方信息</th>
        </tr>
        <tr>
          <td style="width: 50%; color: #999">
            全&emsp;&emsp;称：<span style="color: #116cf8">{{ payFormData.bankInfo.accountName }}</span>
          </td>
          <td style="width: 50%; color: #999">
            全&emsp;&emsp;称：<span style="color: #116cf8">易宝支付有限公司</span>
          </td>
        </tr>
        <tr>
          <td style="width: 50%; color: #999">
            汇出账户：<span style="color: #333">{{ payFormData.bankInfo.accountNo }}</span>
          </td>
          <td style="width: 50%; color: #999">汇款账户：<span style="color: #333">210401294</span></td>
        </tr>
        <tr>
          <td style="width: 50%; color: #999">
            开户银行：<span style="color: #333">{{ payFormData.bankInfo.openBankName }}</span>
          </td>
          <td style="width: 50%; color: #999">开户行名称：<span style="color: #333">易宝支付-备付金账户</span></td>
        </tr>
        <tr>
          <td style="width: 50%; color: #999">
            汇款金额：<span style="color: #116cf8">&nbsp;{{ payFormData.rechargeInfo.orderAmount }}&nbsp;</span
            >&nbsp;<span style="color: #333">元</span>
          </td>
          <td style="width: 50%; color: #333">
            如果直接搜不到开户行名称，先搜索“支付机构备付金集中存管账户”，再找“易宝支付-备付金账户”
          </td>
        </tr>
        <tr>
          <td style="width: 50%; color: #999" colspan="2">
            用途/备注/摘要：<span style="color: #116cf8">{{ payFormData.rechargeInfo.remitComment }}</span>
          </td>
        </tr>
      </table>
      <el-button class="mb20" type="primary" @click="paySuccess = false">我知道了</el-button>
    </div>
  </el-dialog>
  <el-dialog v-model="outerVisible" align-center width="40%">
    <template #header>
      <div class="df aic">
        <el-icon style="color: #fff" size="20">
          <Warning /> </el-icon
        >&nbsp;
        <p style="color: #fff">提示</p>
      </div>
    </template>
    <div>
      <span>你尚未进行支付认证，暂无法充值，</span>
      <span style="color: #2e5882; cursor: pointer; user-select: none" @click="approve">点击此处立即前往认证</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">取消</el-button>
        <el-button type="primary" @click="approve">前往认证</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage} from 'element-plus';
import {formatTime} from '@/filters/index';
import {CollectionTag, Warning} from '@element-plus/icons-vue';
import {RequestCompaniesGetBalance, RequestPayAccountRechargeBalance, RequestBankCodeList} from '@/api/path/index.js';
import {ref, h} from 'vue';
import {useRouter} from 'vue-router';
const router = useRouter();
const formData = ref<any>({
  amount: null,
  payType: 'B2B',
  bankCode: '',
});
const balance = ref<any>('0');
const outerVisible = ref<any>(false);
const getData = () => {
  RequestCompaniesGetBalance().then((res: any) => {
    if (res.success == true) {
      console.log('asdadsas====================>>>>>>>>>>>>>>>>>', res.resultObj.result.accountInfoList);
      res.resultObj.result.accountInfoList.forEach((item: any) => {
        if (item.accountType == 'FUND_ACCOUNT') {
          balance.value = item.balance;
        }
      });
    } else {
      outerVisible.value = true;
    }
  });
};
getData();

const approve = () => {
  router.push({path: '/System/System_payWarrant'});
};
const total = ref<any>(1000);
const currentPage = ref(1);
const pageSize = ref(10);
const selectData = ref<any>([]);
const getSelectData = (keyword: any) => {
  RequestBankCodeList({
    page: currentPage.value,
    rows: pageSize.value,
    keyword: keyword,
  }).then((res: any) => {
    selectData.value = res.resultObj.codes;
    total.value = res.resultObj.count;
  });
};
const keyword = ref<any>('');
const filterSelet = (e: any) => {
  console.log(e);
  keyword.value = e;
  getSelectData(e);
};
getSelectData(keyword.value);
const handleSizeChange = (val: number) => {
  getSelectData(keyword.value);
  // console.log(`${val} items per page`)
};
const handleCurrentChange = (val: number) => {
  getSelectData(keyword.value);
  // console.log(`current page: ${val}`)
};
const refVal = ref(null);
const rules = ref<any>({
  amount: [
    {required: true, message: '请输入充值金额', trigger: 'blur'},
    {
      pattern: /^(([1-9]\d*)|([0-9]\d*\.\d?[1-9]{1}))$/,
      message: '请输入正确的充值金额',
      trigger: 'blur',
    },
  ],
  bankCode: [{required: true, message: '请选择支付银行', trigger: 'change'}],
});
const paySuccess = ref(false);
const payFormData = ref();
const selectBrand = (e: any) => {
  if (e == 'BANK_TRANSFER') {
    formData.value.bankCode = '';
  }
};
const submit = async (formEl: any | undefined) => {
  console.log(formData.value);
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (formData.value.payType == 'B2B') {
        if (formData.value.bankCode != '') {
          RequestPayAccountRechargeBalance(formData.value).then((res: any) => {
            console.log(res.success == true);
            if (res.success == true) {
              window.open(res.resultObj.rechargeInfo.payUrl, '_blank');
            } else {
              ElMessage.error(res.msg);
            }
          });
        } else {
          ElMessage.error('请选择支付银行');
        }
      } else {
        console.log(12312);
        RequestPayAccountRechargeBalance(formData.value).then((res: any) => {
          if (res.success == true) {
            payFormData.value = res.resultObj;
            paySuccess.value = true;
          } else {
            ElMessage.error(res.msg);
          }
        });
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;

  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    padding: 40px;
    width: 100%;
    background-color: #fff;
  }
}

table {
  margin-bottom: 20px;
}

table,
table td,
table th {
  text-align: left;
  border: 1px solid #ebeef5;
  padding: 8px 10px;
  font-size: 14px;
}

.table_title {
  text-align: center;
  padding: 8px 10px;
  width: 80%;
  background: #f5f7fa;
  border: 1px solid #ebeef5;
  border-bottom: none;
  color: #333;
  font-weight: bold;
}

.digTop {
  text-align: center;

  img {
    width: 100px;
    height: 100px;
    margin-top: 10px;
  }

  .digTop_p {
    font-size: 20px;
    color: #3d3d3d;
    margin-top: 20px;
  }

  .digTop_t {
    font-size: 14px;
    color: rgba(34, 34, 34, 0.5);
    margin: 4px 0 20px;
  }
}

.digMain {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .digMain_tips {
    width: 80%;
    border: 1px solid #ebeef5;
    background-color: #f5f7fa;
    padding: 16px 34px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.88);
    margin-bottom: 20px;

    .digMain_tips_li {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.88);
      margin-top: 10px;

      img {
        width: 18px;
        height: 18px;
      }
    }
  }
}

.tips {
  font-size: 14px;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  user-select: none;
  cursor: pointer;

  .hit {
    color: #116cf8;
  }
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6.875rem;
  right: 0;
  margin: auto 0;
}

.downLoad {
  line-height: 1rem;
  margin-left: 0.625rem;
  color: #116cf8;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 100%;
}

.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;

    .el-icon svg {
      color: #fff;
    }
  }

  .el-dialog__title {
    color: #fff !important;
  }

  .el-button {
    .el-icon svg {
      color: #116cf8;
    }
  }
}
</style>
